<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                   <div class="header_box_main">
                     添加商品明细
                   </div>  
                </template>
                <template v-slot:right>
                   <div @click="toAddGoodsName">
                     确定
                   </div>  
                </template>
            </HeaderView>
        </div>

        <div>
            <van-form>
                <van-field
                    v-model="chineseName"
                    name="中文名称"
                    label="中文名称"
                    placeholder="如柠檬茶"
                    :rules="[{ required: true, message: '请填写中文名称' }]"
                />
                <van-field
                    v-model="engName"
                    name="英文名称"
                    label="英文名称"
                    placeholder="Such as Main course"
                    :rules="[{ required: true, message: '请填写英文名称' }]"
                />
                <van-field
                    v-model="goodsAmount"
                    name="商品数量"
                    label="商品数量"
                    placeholder="如1"
                    :rules="[{ required: true, message: '请填写商品数量' }]"
                    
                />
                <van-field
                    v-model="goodPrice"
                    name="商品原价"
                    label="商品原价"
                    placeholder="如100"
                    :rules="[{ required: true, message: '请填写商品原价' }]"
                />
                <van-field
                    v-model="goodImg"
                    name="商品图片"
                    label="商品图片"
                    placeholder="推荐尺寸960*600(选填)>>"
                    :rules="[{ required: true, message: '请填写商品图片' }]"
                    @click="toGoodImg"
                />
            </van-form>
        </div>
    </div>
</template>
<style scoped>
     .header_box_main{
        background: #ff6e53;
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .box{
        background: #f5f5f5;
    }

</style>
<script>
    import HeaderView from '@/components/header1View.vue';
    export default{
        data(){
            return{
                chineseName:'',
                engName:'',
                goodsAmount:'',
                goodPrice:'',
                goodImg:'',
                itemObj:{
                    chineseName:this.chineseName,
                    englishName:this.engName,
                    goodsAmount:this.goodsAmount,
                    goodsOriginalPrice:this.goodPrice,
                    goodsPictures:this.goodImg
                }
            }
        },
        methods:{
            toGoodImg(){
                this.$router.push('./AddGoodImg')
            },
            toAddGoodsName(){
                this.$router.push({
                    path:'./AddGoodsName',
                    query:{
                        goodsDetail:this.itemObj
                    }
                })
            }
        },
        components:{
            HeaderView
        }
    }
</script>